<template>
    <div>
        <div class="logo-tip">
            <div class="logo">
                <img src="../assets/1.svg" alt="" />
            </div>
            <div class="tip">下载APP</div>
        </div>
        <div>
            <van-tabs v-model="active">
                <van-tab :to="item.to" :title="item.title" v-for="(item,index) in tabList" :key="index"></van-tab>
            </van-tabs>
        </div>
        <router-view/>
    </div>

   
</template>

<script>
    export default {
        name:"Index",
        data(){
            return{
                active:0,
                tabList: [
                    {
                        title:"推荐音乐",
                        to:{name:"Home"},
                    },
                    {
                        title:"热歌榜",
                        to:{name:"Hot"},
                    },
                    {
                        title:"搜索",
                        to:{name:"Search"},
                    },
                ],
            };
        },
        created() {
            for (let i=0; i<this.tabList.length; i++) {
                if(this.tabList[i].to.name == this.$route.name) {
                    this.active = i;
                    return;
                }
            }
        },
    };
</script>

<style lang="less" scoped>
/deep/.van-tabs__wrap{
    border-bottom: 1px solid #cccccc;
}
.logo-tip{
    color: #d43c33;
    display: flex;
    height: 84px;
    background-color:#d43c33;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    box-sizing: border-box;
}
.logo{
    width: 142px;
    height: 25px;
}
.logo img{
    width: 100%;
}
.tip{
    text-align: center;
    line-height: 36px;
    width: 100px;
    height: 36px;
    background-color: #fff;
    border-radius: 25px;
    font-size: 16px;
}
</style>